<template>
  <div class="progress_wait">
    <div class="exam-resulting" v-show="is_ing">
      <img src="@/assets/ceshi04.png" class="head-img" alt="">
      <p>请稍等，结果生成中...</p>
      <img src="@/assets/exam.gif" class="exam" alt="">
    </div>
    <div class="progress-wait-content" v-show="!is_ing">
      <div class="text-wait" v-show="testEnd">
        <p class="title">抱歉，测试无结果</p>
        <p class="p-cons">内心缺乏自信，纠结困惑，总觉得事情的发展没有按自己的意愿进行，眼前所见总是灰色一片，感觉不到生命的色彩和乐趣。此时的你不适合做任何决定，应该努力地从回忆过去曾经的美好找到信心，再低头想想自己的责任，努力地寻求力量的填充。如果是自己的身体或是家人的身体出现了比较不好的状态，也要努力地相信总有解决办法的时候。</p>
        <span class="btn" @click="router({path: './examStart', query: {article_type: type}})">重新测试</span>
      </div>
      <div v-show="!testEnd">
        <div class="no-result" :style="no_result" v-show="!haveData">
          <div class="no-result-content">
            <div class="no-content"><p class="result-tip">抱歉，测试无结果</p><p>{{no_content.desc}}</p></div>
            <div class="reTest" @click="router({path: './home'})"><label>重新测试</label></div>
          </div>
        </div>
        <div class="text-result" v-show="haveData">          
          <div class="item">
            <p class="name">{{curName}}，您是</p>
            <p class="type">您的属性</p>
            <p class="type-details">
              <img v-show="main_show == 1" class="img-max" src="../../assets/status1.png">
              <img v-show="main_show == 2" class="img-max" src="../../assets/status2.png">
              <img v-show="main_show == 3" class="img-max" src="../../assets/status3.png">
              <img v-show="main_show == 4" class="img-max" src="../../assets/status4.png">
              <img v-show="main_show == 5" class="img-max" src="../../assets/status5.png">
              <img v-show="fu_show == 1" class="img-min" src="../../assets/status1.png">
              <img v-show="fu_show == 2" class="img-min" src="../../assets/status2.png">
              <img v-show="fu_show == 3" class="img-min" src="../../assets/status3.png">
              <img v-show="fu_show == 4" class="img-min" src="../../assets/status4.png">
              <img v-show="fu_show == 5" class="img-min" src="../../assets/status5.png">
              <span>{{tip_content.host_name}}{{(fu_text) ? '+'+tip_content.deputy_name : ''}}属性</span>
            </p>            
            <label ref="txtH1" class="result-cons" :class="{'is-show-more':show_more[0].more}" v-html="tip_content.desc"></label>
          </div>  
          <div class="item">
            <div class="type-name">属性解说</div>
            <div class="to-canvas">
              <canvas id="imgcanvas" width="240" height="230"></canvas>
              <canvas id="canvas" width="240" height="230"></canvas>
            </div>
            <div class="energy-text" :class="{'is-show-more':show_more[1].more}" ref="txtH2" v-html="tip_content.desc2"></div>
            <div class="more-center">
              <div class="look-more" :class="{'to-more-show':show_more[1].more}" v-show="is_show[1].shows">
                <button v-if="show_more[1].more" class="btn" @click="show_more[1].more = !show_more[1].more"><span class="span-txt">查看更多 <img src="@/assets/chengrenceshi05.png" class="more-img" alt=""></span></button>
                <button v-else class="btn no-border" @click="show_more[1].more = !show_more[1].more"><span class="span-txt">收起列表 <img src="@/assets/chengrenceshi09.png" class="more-img" alt=""></span></button>
              </div>
              <div class="to-hr"></div>
            </div>
          </div>
          <div class="item">
            <div class="type-name">能量形态</div>
            <div class="to-img">
              <p v-show="img_show[0].show"><img src="../../assets/color1.png"></p>
              <p v-show="img_show[1].show"><img src="../../assets/color2.png"></p>
              <p v-show="img_show[2].show"><img src="../../assets/color3.png"></p>
              <p v-show="img_show[3].show"><img src="../../assets/color4.png"></p>
              <p v-show="img_show[4].show"><img src="../../assets/color5.png"></p>
              <p v-show="img_show[5].show"><img src="../../assets/color6.png"></p>
              <p v-show="img_show[6].show"><img src="../../assets/color7.png"></p>
            </div>
            <div class="energy-text" :class="{'is-show-more':show_more[2].more}" ref="txtH3" v-html="energyText"></div>
            <div class="more-center">
              <div class="look-more" :class="{'to-more-show':show_more[2].more}" v-show="is_show[2].shows">
                <button v-if="show_more[2].more" class="btn" @click="show_more[2].more = !show_more[2].more"><span class="span-txt">查看更多 <img src="@/assets/chengrenceshi05.png" class="more-img" alt=""></span></button>
                <button v-else class="btn no-border" @click="show_more[2].more = !show_more[2].more"><span class="span-txt">收起列表 <img src="@/assets/chengrenceshi09.png" class="more-img" alt=""></span></button>
              </div>
              <div class="to-hr"></div>
            </div>            
          </div>
          <div class="item">
            <div class="type-name">意识形态</div>
            <div class="other-canvas">
              <canvas id="otherCanvas" width="300" height="300"></canvas>
            </div>
            <div class="energy-text" :class="{'is-show-more':show_more[3].more}" ref="txtH4" v-html="tip_content.desc4"></div>
            <div class="more-center">
              <div class="look-more" :class="{'to-more-show':show_more[3].more}" v-show="is_show[3].shows">
                <button v-if="show_more[3].more" class="btn" @click="show_more[3].more = !show_more[3].more"><span class="span-txt">查看更多 <img src="@/assets/chengrenceshi05.png" class="more-img" alt=""></span></button>
                <button v-else class="btn no-border" @click="show_more[3].more = !show_more[3].more"><span class="span-txt">收起列表 <img src="@/assets/chengrenceshi09.png" class="more-img" alt=""></span></button>
              </div>
            </div>            
          </div>
          <div class="dinzhi"><img src="@/assets/chengrenceshi08.png" alt=""></div>
          <div class="fixed" v-show="cate_list > 0" @click="router({path: './planMake'})"><span class="btn">定制方案</span></div>
          <div class="fixed" v-show="cate_list <= 0" @click="router({path: './customized'})"><span class="btn">定制方案</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { AlertModule } from 'vux';
  import { examResult, getInfo, isOpenPlan, myplancate } from '@/api/api';
  export default {
    data () {
      return {
        cate_list: "",
        progress_start:{
          backgroundRepeat: "no-repeat",
          backgroundSize: "100% 100%"
        },
        no_result:{
          backgroundRepeat: "no-repeat",
          backgroundSize: "100% 100%"
        },
        curName: '',
        energyText:'能量值',
        resultText: '结果说明',
        fu_text: true,
        progress1: 0,
        progress2: 1,
        testEnd: true,
        haveData: true,
        warnLine: false,
        main_show: 1,
        fu_show: 1,
        tip_content: {host_name: '',deputy_name: '',desc: '',desc2:'',desc4: ''},
        no_content: {desc:'',value: ''},
        img_show:[{show:false},{show:false},{show:false},{show:false},{show:false},{show:false},{show:false}],
        color_max: ['B5B6B6','DDDDDD','B5B6B6','DDDDDD','B5B6B6','DDDDDD','B5B6B6','DDDDDD','B5B6B6','DDDDDD'],
        color_center: ['B5B6B6','DDDDDD','B5B6B6','DDDDDD','B5B6B6','DDDDDD','B5B6B6','DDDDDD','B5B6B6','DDDDDD'],
        color_min: ['B5B6B6','DDDDDD','B5B6B6','DDDDDD','B5B6B6','DDDDDD','B5B6B6','DDDDDD','B5B6B6','DDDDDD'],
        color_triangle: ['00A0EC','F8B62C','F8CC7F','AA7040','7F4E20','E9505E','C53941','8EC31E','CBDD70','72C9EC'],
        color_Quan: ['8EC31E','CBDD70','E9505E','C53941','AA7040','7F4E20','F8B62C','F8CC7F','00A0EC','72C9EC'],
        font_size:[12,12,12,12,12],
        bg_color:['#B5B6B6','#B5B6B6','#B5B6B6','#B5B6B6','#B5B6B6'],
        main_color:['#00A0EC','#F8B62C','#AA7040','#E9505E','#8EC31E'],
        person_value:[{value:'70'},{value:'20'},{value:'10'},{value:'20'},{value:'20'}],
        text_value: [{value: "创新意识",color: "c63942"},{value: "领导意识",color: "f8b62d"},{value: "服务意识",color: "c63942"},{value: "行动意识",color: "f8b62d"},{value: "平衡意识",color: "00a0e9"}],
        show_more: [{more: false},{more: false},{more: false},{more: false}],
        is_show: [{shows: false},{shows: false},{shows: false},{shows: false}],
        article_type: '',
        is_ing: true,
      }
    },
    created(){
      if(localStorage.getItem("adultNum")){
        localStorage.removeItem("adultNum");
        localStorage.removeItem("order_id");
      }
      this.plancate()
      setTimeout(() => {
        this.testEnd = false;
        this.is_ing = false;
        this.$nextTick(() =>{
          let lenList = [];
          lenList.push(Number(window.getComputedStyle(this.$refs.txtH1).height.replace('px','')));
          lenList.push(Number(window.getComputedStyle(this.$refs.txtH2).height.replace('px','')));
          lenList.push(Number(window.getComputedStyle(this.$refs.txtH3).height.replace('px','')));
          lenList.push(Number(window.getComputedStyle(this.$refs.txtH4).height.replace('px','')));
          for(let i=0; i<lenList.length; i++){
            if(lenList[i] > 130){
              this.show_more[i].more = true;
              this.is_show[i].shows = true;
            }
          }
        })
      }, 1800);
      this.article_type = this.$route.query.article_type
    },
    mounted(){
      this.$nextTick(function(){
        this._getInfo();
        let resultP = {order_id:this.$route.query.order_id+'',article_type:this.article_type+''};
        examResult(resultP).then(res => {
          if(res.data.code == '200'){
              if(res.data.data.list.ostatus == 2){
                let indexs = 0;
                for(let i in res.data.data.list.sum_list){
                  if(res.data.data.list.sum_list[i] >= 6){
                    if(10-((Number(i)+1)*2 +1) < 0){
                      indexs = 9;
                    }else{
                      indexs = 10-((Number(i)+1)*2 +1);
                    }
                    let cur = 10-(Number(i)+1)*2;
                    this.color_max[indexs] = this.color_triangle[indexs];
                    this.color_max[cur] = this.color_triangle[cur];
                  }else if(res.data.data.list.sum_list[i] >= 4 && res.data.data.list.sum_list[i] <= 5){
                    this.color_center[Number(i)*2] = this.color_Quan[Number(i)*2];
                    this.color_center[Number(i)*2+1] = this.color_Quan[Number(i)*2+1];
                  }else{
                    this.color_min[Number(i)*2] = this.color_Quan[Number(i)*2];
                    this.color_min[Number(i)*2+1] = this.color_Quan[Number(i)*2+1];
                  }
                }
                let main_index = 5 - Number(res.data.data.list.host);
                this.font_size[main_index] = 16;
                this.bg_color[main_index] = this.main_color[main_index];

                this.person_value = res.data.data.list.percent_id_list;
                this.text_value = res.data.data.list.team_id_list;
                let sumList = this._arraySort(res.data.data.list.sum_list);
                this._imgShow(res.data.data.list.sums);
                if(sumList[0] == sumList[1]) this.warnLine = true;
                this.main_show = res.data.data.list.host;
                this.fu_show = res.data.data.list.deputy;
                if(this.main_show == this.fu_show || (sumList[1] == sumList[2] && sumList[1] == sumList[3] && sumList[1] == sumList[4])){
                  this.fu_show = 10;
                  this.fu_text = false;
                }
                this.tip_content.host_name = res.data.data.list.host_name;
                this.tip_content.deputy_name = res.data.data.list.deputy_name;
                this._canvas();
                this.tip_content.desc = this.HTMLDecode(res.data.data.list.desc_list.desc);
                this.tip_content.desc2 = this.HTMLDecode(res.data.data.list.desc_list.desc2);
                this.tip_content.desc4 = this.HTMLDecode(res.data.data.list.desc_list.desc4);
                this.energyText = res.data.data.list.energy_id_list.desc;
              }else{
                this.haveData = false;
                if(res.data.data.list.noreturn_id_list != null){
                  this.no_content.value = this.HTMLDecode(res.data.data.list.noreturn_id_list.value);
                  this.no_content.desc = this.HTMLDecode(res.data.data.list.noreturn_id_list.desc);
                }else{
                  this.no_content.value = '抱歉，测试无结果';
                  this.no_content.desc = '测试异常，请重新测试';
                }
              }
          }else if(res.data.code == '400'){
            this.haveData = false;
            this.no_content.value = '抱歉，测试无结果';
            this.no_content.desc = '测试异常，请重新测试';
          }
        });

      })
    },
    methods:{
      plancate(){
        myplancate().then((res) =>{
          this.cate_list=res.data.data.list.length
        }).catch((err) => {
          console.dir(err)
        })
      },
      //能量图的显示与隐藏
      _imgShow(acount){
        if(acount>=11 && acount<= 12 ){
          this.img_show[0].show = true;
        }else if(acount>=13 && acount<= 14){
          this.img_show[1].show = true;
        }else if(acount>=15 && acount<= 16){
          this.img_show[2].show = true;
        }else if(acount>=17 && acount<= 19){
          this.img_show[3].show = true;
        }else if(acount>=20 && acount<= 22){
          this.img_show[4].show = true;
        }else if(acount>=23 && acount<= 25){
          this.img_show[5].show = true;
        }else if(acount>=26 && acount<= 27){
          this.img_show[6].show = true;
        }
      },
      //获取个人信息
      _getInfo(){
        getInfo().then(res => {
          if(res.data.code == '200'){
            this.curName = res.data.data.nickname;
          }
        })
      },
      //数组排序
      _arraySort(curList){
        for (var i = 0; i < curList.length; i++) {
          for (var j = 0; j < curList.length - 1 - i; j++) {
            if (curList[j] < curList[j+1]) {
              var temp = curList[j];
              curList[j] = curList[j+1];  
              curList[j+1] = temp;
            }
          }
        }
        return curList;
      },
      _canvas(){
        var imgcanvas = document.getElementById('imgcanvas');
        var img_ctx = imgcanvas.getContext('2d');
        var img =new Image();
        img.src="/static/heads.png";
        img.addEventListener('load',function(){
          img_ctx.drawImage(img,10,5,230,230);
        })

        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        this._triangle(context,50,100,'violet');
        this._circular(context,50,'max');
        this._yuan(context,50);
        this._circular(context,30,'min');
        this._yuan(context,30);
        this._line(context,50);
        
        this._statusQuan(context,210,90,this.font_size[0],this.bg_color[0]);
        this._text(context,'white','center',this.font_size[0],'微软雅黑','水',210,95);
        this._statusQuan(context,120,20,this.font_size[1],this.bg_color[1]);
        this._text(context,'white','center',this.font_size[1],'微软雅黑','金',120,25);
        this._statusQuan(context,20,90,this.font_size[2],this.bg_color[2]);
        this._text(context,'white','center',this.font_size[2],'微软雅黑','土',20,95);
        this._statusQuan(context,65,200,this.font_size[3],this.bg_color[3]);
        this._text(context,'white','center',this.font_size[3],'微软雅黑','火',65,205);
        this._statusQuan(context,180,200,this.font_size[4],this.bg_color[4]);
        this._text(context,'white','center',this.font_size[4],'微软雅黑','木',180,205);

        let other_canvas =  document.getElementById('otherCanvas');
        let ctx = other_canvas.getContext('2d');
        this._otherYuan(ctx,1,110,2,true,'stroke','grey');//最外面的大圆

        this._otherYuan(ctx,1,40+Number(this.person_value[0].value)/1.45,1,false,'fill','#'+this.text_value[0].color);//下面的最大实心圆
        this._text(ctx,'#172F6D','center',12,'微软雅黑',this.text_value[0].value,150,280); //下面的最大实心圆自带文字
        this._text(ctx,'#172F6D','center',14,'微软雅黑',this.person_value[0].value+'%',150,298); //下面的最大实心圆自带文字
        // this._otherYuan(ctx,1,80,1,false,'stroke','grey'); //下面的空心圆
        //从右到左的扇形机文字
        this._shap(ctx,40+Number(this.person_value[1].value)*0.55,0,0.565,true,'#'+this.text_value[1].color); //1
        this._text(ctx,'#172F6D','center',12,'微软雅黑',this.text_value[1].value,275,100);
        this._text(ctx,'#172F6D','center',14,'微软雅黑',this.person_value[1].value+'%',275,120);
        this._shap(ctx,40+Number(this.person_value[2].value)*0.55,0.565,0.66,true,'#'+this.text_value[2].color); //2
        this._text(ctx,'#172F6D','center',12,'微软雅黑',this.text_value[2].value,220,30);
        this._text(ctx,'#172F6D','center',14,'微软雅黑',this.person_value[2].value+'%',220,48);
        this._shap(ctx,40+Number(this.person_value[3].value)*0.55,0.66,0.8,true,'#'+this.text_value[3].color);  //3
        this._text(ctx,'#172F6D','center',12,'微软雅黑',this.text_value[3].value,90,30);
        this._text(ctx,'#172F6D','center',14,'微软雅黑',this.person_value[3].value+'%',90,48);
        this._shap(ctx,40+Number(this.person_value[4].value)*0.55,0.8,1,true,'#'+this.text_value[4].color); //4
        this._text(ctx,'#172F6D','center',12,'微软雅黑',this.text_value[4].value,25,100);
        this._text(ctx,'#172F6D','center',14,'微软雅黑',this.person_value[4].value+'%',25,120);
        //从右到左的斜线
        this._isLine(ctx,0.565,150,'grey');
        this._isLine(ctx,0.66,140,'grey');
        this._isLine(ctx,0.8,150,'grey');
        this._beeLine(ctx,10,150,290,150,'grey');  //最中间的直线
        
        this._otherYuan(ctx,2,40,2,true,'fill','white'); //最中间的圆及文字
        this._otherYuan(ctx,2,40,2,true,'stroke','grey'); 
        this._text(ctx,'grey','center',20,'微软雅黑','意识',150,145);
        this._text(ctx,'grey','center',20,'微软雅黑','状态',150,165);
        
        if(this.warnLine){
          this._xuYuan(ctx,2,95,1,true,'red');      //红色的虚线及文字
          this._text(ctx,'red','center',12,'微软雅黑','警戒线',50,170);
          this._text(ctx,'red','center',12,'微软雅黑','警戒线',250,170);
        }
        
      },
      _triangle(obj,s,l,color){
        let alls = Math.PI*2;
        for(var i=0; i<10; i++){
          var deg_before = 18 + i*36;
          var deg_after = 18 + (i+1) * 36;
          var radius = 0;
          if(i%2 == 0){ radius = l; }else{ radius = s;}
          obj.beginPath();
          obj.moveTo(120,120);
          obj.lineTo(Math.cos(alls - (deg_before*Math.PI/180))*radius+120,Math.sin(alls - (deg_before*Math.PI/180))*radius+120);
          if(radius == l){ radius = s;}else{radius = l;}
          obj.lineTo(Math.cos(alls - (deg_after*Math.PI/180))*radius+120,Math.sin(alls - (deg_after*Math.PI/180))*radius+120);
          obj.fillStyle = '#'+this.color_max[i]; 
          obj.fill();
        }
      },
      _statusQuan(obj,positionX,positionY,r,color){
        obj.beginPath();
        obj.arc(positionX, positionY, r, 0, Math.PI*2, true);
        obj.fillStyle = color;
        obj.fill();
      },
      _circular(obj,r,types){
        let color = [];
        if(types == 'max'){
          color = this.color_center;
        }else{
          color = this.color_min;
        }
        for(var i=0; i<10; i++){
          var radius_befor = 18 + i * 36;
          var radius_after = 18 + (i+1) * 36;
          obj.beginPath();   
          obj.moveTo(120,120);
          obj.arc(120,120,r,radius_befor*Math.PI/180,radius_after*Math.PI/180,false)
          obj.fillStyle = '#'+color[i];
          obj.fill();
        }
      },
      _yuan(obj,r){
        obj.beginPath();
        obj.arc(120, 120, r, 0, Math.PI*2 , true);
        obj.strokeStyle = 'white';
        obj.lineWidth = 3;
        obj.stroke();
      },
      _line(obj,r){
        var radius = 0;
        for(var i=0; i<5; i++){
          if(i < 2){
            radius = 55 - (i*2) + i*72;
          }else if(i == 2){
            radius = 57 - (i*2) + i*72;
          }else if(i == 3){
            radius = 50 + (i-2)*4 + i*72;
          }else{
            radius = 48 + (i-2)*4 + i*72;
          }
          obj.beginPath();
          obj.moveTo(120,120);
          obj.lineTo(Math.cos(radius*Math.PI/180)*r+120,-Math.sin(radius*Math.PI/180)*r+120);
          obj.lineWidth = 3;
          obj.strokeStyle = 'white';
          obj.stroke();
        }
      },
      _otherYuan(obj,wid,r,longs,flag,types,color){
        obj.beginPath();
        obj.lineWidth = wid;
        obj.arc(150,150,r,0,Math.PI*longs,flag);
        if(types == 'stroke'){
          obj.strokeStyle = color;
          obj.stroke();
        }else{
          obj.lineTo(150,150);
          obj.fillStyle = color;
          obj.fill();
        }
      },
      _shap(obj,r,from,to,flag,color){
        obj.beginPath();
        if(from == 0){
          obj.arc(150,150,r,from,Math.PI/to,flag); 
        }else{
          obj.arc(150,150,r,Math.PI/from,Math.PI/to,flag); 
        }
          obj.lineTo(150,150);
          obj.fillStyle= color; 
          obj.fill();
      },
      _text(obj,color,positions,max,fonts,content,positionX,positionY){
        obj.fillStyle= color;
        obj.textAlign = positions;
        obj.font = max+'px '+fonts;
        obj.fillText(content,positionX,positionY);
      },
      _isLine(obj,max,long,color){
        obj.beginPath();
        obj.moveTo(150,150);
        obj.lineTo(Math.cos(Math.PI/max)*long+150,Math.sin(Math.PI/max)*long+150);
        obj.strokeStyle = color;
        obj.stroke();
      },
      _beeLine(obj,formX,formY,toX,toY,color){
        obj.beginPath();
        obj.moveTo(formX,formY);
        obj.lineTo(toX,toY);
        obj.strokeStyle = color;
        obj.stroke();
      },
      _xuYuan(obj,wid,r,long,flag,color){
        obj.beginPath();
        obj.lineWidth = wid;
        obj.setLineDash([12, 5]);
        obj.arc(150,150,r,0,Math.PI*long,flag);
        obj.strokeStyle = color;
        obj.stroke();
      },
      router (path) {
        this.$router.push(path)
      },
      //解码
      HTMLDecode(htm) {
        var temp = document.createElement("div");
        temp.innerHTML = htm;
        var output = temp.innerText || temp.textContent;
        temp = null;
        return output;
      },
    },
  };
</script>

<style scoped>
.progress_wait{background-color: #f5f5f5;}
.progress_wait .text-result{
    padding-top: 8rem;
    background-image: url(/static/img/chengrenceshi01.b23b96d.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
}
.progress_wait .text-result {
  padding-top: 8rem;
  background-image: url("../../assets/chengrenceshi01.png");
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
}
.progress_wait .text-result .item {
  width: 92%;
  margin-left: 4%;
  border-radius: 0.3rem;
  background-color: #fff;
  padding: 2rem 1.6rem;
  box-sizing: border-box;
  margin-bottom: 1rem;
  position: relative;
}
.progress_wait .text-result .item .name {
  color: #333;
  font-weight: bold;
  font-size: 1.8rem;
}
.progress_wait .text-result .item .type {
  font-size: 1.2rem;
  color: #333;
  height: 1.2rem;
  line-height: 1.2rem;
  margin-top: 3.2rem;
  text-align: center;
}
.progress_wait .text-result .item .type-details {
  text-align: center;
  margin: 1rem 2.2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e6e6e6;
}
.progress_wait .text-result .item .type-details img {
  width: 3.25rem;
  display: inline-block;
  vertical-align: middle;
}
.progress_wait .text-result .item .type-details .img-max{
  margin-left: 0;
}
.progress_wait .text-result .item .type-details .img-min{
  margin-left: -2rem;
}
.progress_wait .text-result .item .type-details span {
  font-size: 1.8rem;
  color: #172f6d;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.progress_wait .text-result .item .result-cons {
  font-size: 1.3rem;
  line-height: 2.4rem;
  color: #333;
}

.progress_wait .text-result .item .type-name {
  font-size: 1.7rem;
  height: 1.7rem;
  line-height: 1.7rem;
  font-weight: 500;
  position: relative;
}
.progress_wait .text-result .item .type-name::after {
  content: '';
  position: absolute;
  left: -1.6rem;
  width: 0.3rem;
  height: 100%;
  background-color: #172f6d;
}

.progress_wait .main-content {
  float: left;
  margin-right: 0.2rem;
}
.progress_wait .main-content .img-max {
  width: 1rem;
  height: 1rem;
  position: relative;
  top: 0.1rem;
  margin-left: 0;
}
.progress_wait .main-content .img-min {
  width: 0.6rem;
  height: 0.6rem;
  margin-left: -2.5rem;
}
.progress_wait .main-body {
  height: auto;
  padding-top: 0.1rem;
}
.progress_wait .main-body p {
  font-size: 1.4rem;
  font-weight: bold;
}
.progress_wait .main-body label {
  font-size: 1.3rem;
  font-family: '\5FAE\8F6F\96C5\9ED1';
  display: block;
  width: 100%;
  height: auto;
  line-height: 1.5rem;
  word-wrap: break-word;
  margin-top: 4.25rem;
}
.progress_wait .to-canvas {
  position: relative;
  text-align: center;
  width: 100%;
  height: 25rem;
}
.progress_wait #imgcanvas,
.progress_wait #canvas {
  position: absolute;
  top: 0px;
  left: 50%;
  right: 0px;
  bottom: 0px;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}
.progress_wait .to-img {
  margin-top: 1rem;
  height: auto;
  width: 100%;
}
.progress_wait .to-img p {
  width: 85%;
  height: auto;
  margin: 0px auto;
  text-align: center;
}
.progress_wait .to-img p img {
  width: 100%;
  height: auto;
}
.progress_wait .attr-tell {
  text-align: center;
  font-size: 2rem;
  color: #172F6D;
  font-weight: bold;
  margin-top: .5rem;
  margin-bottom: 1rem;
}
.progress_wait .energy-text {
  height: auto;
  font-size: 1.4rem;
  word-wrap: break-word;
  text-align: left !important;
  padding-bottom: 4rem;
}
.progress_wait .other-canvas {
  text-align: center;
}
.progress_wait .to-absolute {
  position: absolute;
  width: 280px;
  height: 260px;
  left: 50%;
  margin-left: -135px;
  margin-top: -5px;
}
.progress_wait .no-result {
  width: 100%;
  height: 100vh;
}
.progress_wait .no-result-content {
  padding-top: 12rem;
}
.progress_wait .no-content {
  width: 80%;
  min-height: 3rem;
  margin: 0px auto;
  height: auto;
  font-size: 1.3rem;
  padding: 5px;
}
.progress_wait .no-content p{
  color: #666;
  font-size: 1.3rem;
  line-height: 2.4rem;
}
.progress_wait .no-content .result-tip {
  text-align: center;
  font-size: 1.5rem;
  color: #000;
  font-weight: bold;
  margin-bottom: 2rem;
}
.progress_wait .no-result .reTest {
  width: 80%;
  margin: 3rem auto 0px auto;
  height: 4rem;
  background-color: #172F6D;
  line-height: 4rem;
  color: white;
  text-align: center;
  border-radius: 100px;
}
.progress_wait .no-result .reTest img {
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  top: 0.75rem;
  margin-right: 0.5rem;
}
.progress_wait .is-show-more {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  height: 10rem !important;
  border: 1px solid transparent !important;
}
.progress_wait .more-center{  
  position: absolute;
  width: calc(100% - 3.2rem);
  bottom: 0;
  line-height: 4rem;
  height: 4rem;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
}
.progress_wait .look-more {
  line-height: 4rem;
  text-align: center;
}
.progress_wait .look-more .btn {
  color: #172f6d;
  font-size: 1.3rem;
  border: 0px;
  background: transparent;
  padding: 0;
  outline: none;
}
.progress_wait .look-more .btn .span-text{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  line-height: 4rem;
}
.progress_wait .look-more .no-border {
  border: 0 !important;
  background: transparent !important;
  margin-top: 1rem;
}
.progress_wait .look-more .more-img {
  width: 1rem;
  height: .8rem;
  display: inline-block;
  position: relative;
  top: -.1rem;
}
.progress_wait .dinzhi {
  margin-top: 3rem;
  padding-bottom: 6rem;
  width: 78%;
  margin-left: 11%;
}
.progress_wait .fixed {
  background-color: #fff;
  padding: 0.75rem 1.5rem;
  position: fixed;
  bottom: 0;
  height: 5.5rem;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 1px 3px 7px rgba(0,0,0,0.2);
}
.progress_wait .fixed .btn {
  line-height: 4rem;
  height: 4rem;
  width: 100%;
  background-color: #172f6d;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 500;
  display: block;
  text-align: center;
  border-radius: 100px;
}
.progress_wait .text-wait .title {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.8rem;
  height: 1.8rem;
  position: absolute;
  width: 100%;
  text-align: center;
  top: 9.6rem;
}
.progress_wait .text-wait .p-cons {
  position: absolute;
  font-size: 1.3rem;
  line-height: 2.4rem;
  color: #666;
  width: 80%;
  margin-left: 10%;
  top: 14.2rem;
}
.progress_wait .text-wait .btn {
  width: 80%;
  position: absolute;
  left: 10%;
  top: 33.6rem;
  height: 5rem;
  line-height: 5rem;
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
  color: #fff;
  background-color: #152d6f;
  border-radius: 100px;
}
.progress_wait .exam-resulting {
  text-align: center;
  min-height: 100vh;
  background-color: #fff;
}
.progress_wait .exam-resulting img.head-img {
  width: 13.5rem;
  height: 13.5rem;
  margin-top: 13.2rem;
  display: inline-block;
}
.progress_wait .exam-resulting p {
  text-align: center;
  line-height: 1.5rem;
  font-size: 1.5rem;
  height: 1.5rem;
  color: #666;
  margin-top: 2.3rem;
}
.progress_wait .exam-resulting img.exam {
  width: 10%;
  display: inline-block;
  margin-top: 4rem;
}
</style>
